import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {TextButton} from '../../components/Button';
import I18n from 'react-native-i18n';
import {updateUser} from '../../api/user';
import {updateUserInfo} from '../../redux/action';
import StorageManager, {USER_INFO} from '../../storage';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  coinList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    paddingLeft: 10,
    paddingRight: 10,
    // paddingLeft: 20,
    // paddingRight: 20
  },
  coin: {
    backgroundColor: '#f6f6f5',
    paddingTop: 26,
    paddingBottom: 26,
    width: '100%',
    borderRadius: 20,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#f6f6f5',
  },
  coinSelected: {
    borderColor: '#ffce3e',
  },
  coinName: {
    marginTop: 8,
    fontWeight: 'bold',
  },
  coinLogo: {
    width: 50,
    height: 50,
  },
});

class SelectInterestScreen extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      coins: [
        {
          name: 'BTC',
          logo:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1215158615,1327408179&fm=26&gp=0.jpg',
        },
        {
          name: 'ETH',
          logo:
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=698172030,2839551171&fm=26&gp=0.jpg',
        },
        {
          name: 'DOT',
          logo:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1215158615,1327408179&fm=26&gp=0.jpg',
        },
        {
          name: 'BTC',
          logo:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1215158615,1327408179&fm=26&gp=0.jpg',
        },
        {
          name: 'ETH',
          logo:
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=698172030,2839551171&fm=26&gp=0.jpg',
        },
        {
          name: 'DOT',
          logo:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1215158615,1327408179&fm=26&gp=0.jpg',
        },
      ],
    };
  }

  componentDidMount() {
    super.componentDidMount();
  }

  selectInterest = () => {
    //测试
    updateUser({
      userToken: this.props.userInfo.token,
      interest: 'btc,eth',
    })
      .then(async (res) => {
        await this.props.updateUserInfo(res.data);
        this.props.navigation.navigate('Home');
      })
      .catch((err) => {
        this._showAlert({content: err.msg || err});
      });
  };

  renderComponent = () => {
    return (
      <View style={styles.container}>
        <Image
          style={{
            marginBottom: 0,
            width: 120,
            height: 120,
            alignSelf: 'center',
            marginTop: 80,
          }}
          source={require('../../assets/login/interest.png')}
          resizeMode="contain"
        />
        <Text
          style={{
            color: 'white',
            fontSize: 20,
            fontWeight: 'bold',
            alignSelf: 'center',
            marginBottom: 30,
          }}>
          {I18n.t('login.interest')}
        </Text>
        <View style={styles.coinList}>
          {this.state.coins.map((coin, index) => {
            return (
              <View style={{width: '33.3%', padding: 4}}>
                <View
                  style={[styles.coin, index % 2 ? styles.coinSelected : null]}>
                  <Image style={styles.coinLogo} source={{uri: coin.logo}} />
                  <Text style={styles.coinName}>{coin.name}</Text>
                </View>
              </View>
            );
          })}
        </View>
        <TextButton
          buttonStyle={{marginLeft: 60, marginRight: 60}}
          text={I18n.t('login.next')}
          onPress={this.selectInterest}
        />
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
});

const mapDispatchToProps = (dispatch) => ({
  updateUserInfo: (item) => dispatch(updateUserInfo(item)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SelectInterestScreen);
